<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            position: absolute;
        }
        #msg{
            width: 100px;
            height: 50px;
            position: absolute;
            top:10px;
            left: 10px;
            color:#f00;
            font-size: 50px;
            z-index: 9;
        }
        #gg{
            width: 200px;
            height: 100px;
            position: absolute;
            top: 30%;
            left: 30%;
            background-color: #fed;
            font-size: 25px;
            z-index: 9;
            display: none;
        }
    </style>
</head>
<body>
    <h1>JS html5 事件</h1>
    <hr>
    
    <p oncopy="copy()">日照香炉生紫烟,遥看瀑布挂前川</p>
    <input type="text" oncut="cut()" value="请剪切我!!">
    <p id="ts">暂无操作</p>
    <input type="text" onpaste="paste()" placeholder="在此处粘贴">

    <br>
    <hr>
    <br>
    <font size="6" color="#f00" id="info">暂无操作</font>
    <br>
    <audio controls onplay="b()" onpause="z()" onended="t()">
        <!-- type: MIME -->
        <source src="./media/we will rock you.mp3" type="audio/mp3">
        浏览器不支持 audio标签,请使用XXX浏览器
    </audio>

    <br>
    <br>
    <hr>
    <br>

    <div id="box">
        <video id="vv" width="600" controls onplay="bf()" onpause="zt()" onended="tz()">
            <source src="./media/奥斯卡最佳视觉效果提名混剪.mp4" type="video/mp4">
            浏览器不支持 video 标签,请使用XXX浏览器
        </video>
        <div id="msg">操作</div>
        <div id="gg">此处广告位招租 <br> 猛戳此处购买</div>
    </div>


    <script>
        // - oncopy   拷贝内容时触发
        function copy(){
            alert('已复制');
        }
        // - oncut    剪切内容时触发
        function cut(){
            ts.innerHTML = '已剪切';
        }
        // - onpaste  粘贴内容时触发
        function paste(){
            ts.innerHTML = '已 zhantie';
        }


        // - onplay   音/视频开始播放时触发(audio/video)
        function b(){
            info.innerHTML = '开始播放';
        }
        // - onpause  音/视频暂停时触发(audio/video)
        function z(){
            info.innerHTML = '暂停播放';
        }
        // - onended  音/视频播放结束时触发(audio/video)
        function t(){
            info.innerHTML = '停止播放';
        }


        function bf(){
            msg.innerHTML = '播放';
        }
        function zt(){
            msg.innerHTML = '暂停';
        }
        function tz(){
            msg.innerHTML = '停止';
        }

        vv.onclick = function(){
            if (vv.paused) {
                gg.style.display = 'none';
            } else {
                gg.style.display = 'block';
            }
        }

    </script>
</body>
</html>